/**
 * @description 属性栏展示
 */
import React, { useState } from "react"
import { Button, Statistic, InputNumber } from "antd"
import audioSrc from '@/assets/audio.mp3'
import AbIcon from "@/components/DecorateIcons/Ab_Icon"


const countdownValue = Date.now() + 60 * 1000
function DetailInfo({ base }) {

  const [storeup, setStoreUp] = useState(false)
  const [isEnd, setIsEnd] = useState(false)

  return (
    <div className="attr">

      {/* 1 标题盒子 */}
      <div className="title">
        {/* 标题 */}
        <span className="text">标题标题标题标题</span>
        {/* 收藏 */}
        <Button className='btn' onClick={() => setStoreUp(pre => !pre)} icon={<AbIcon className='icon' iconName={storeup ? base.storeup_icon : base.unStoreup_icon} />}  >{storeup ? '已收藏' : '收藏'}</Button >
      </div >

      {/* 2 优惠卷 */}
      <div className="coupon">
        <Button className="btn">优惠券</Button>
      </div>


      {/* 3.1 倒计时 */}
      <div className="countdown">
        <span className="label" >倒计时</span>
        <Statistic.Countdown
          className="text"
          value={countdownValue}
          format={isEnd ? '倒计时已结束' : base.countdown_format}
          onFinish={() => setIsEnd(true)}
        />
      </div>


      {/* 4 价格 */}
      <div className="price">
        <span className="label" >价格</span>
        <span className="text" >99</span>
      </div>

      {/* 5. 链接:下载 */}
      <div className="link">
        <span className="label" >文件</span>
        <span className='text' >文件下载</span>
      </div>

      {/* 6. 其它 */}
      <div className="others">
        <span className="label" >其它</span>
        <span className="text" >内容内容内容</span>
      </div>

      {/* 7. 音频 */}
      <div className="audio">
        <span className="label" >音频</span>
        <audio className="text" src={audioSrc} controls></audio>
      </div>


      {/* 8. 支付功能的按钮 */}
      <div className="pay-btn">
        <InputNumber className='input-number' precision={0} defaultValue={1} />
        <Button className='cart' >添加到购物车</Button>
        <Button className='buy'  >立即购买</Button>
        <Button className='score'  >积分兑换</Button>
        <Button className='reserve' >立即预订</Button>
      </div>

      {/* 9. 操作类（增删改查、跨表、审核等） */}
      <div className="action-btn">
        <Button className='edit' >修改</Button>
        <Button className='delete' >删除</Button>
        <Button className='other' >其它</Button>
      </div>
    </div >
  )
}


export default React.memo(DetailInfo)